<script lang="ts" setup>
import { reactive, ref, useTemplateRef } from "vue";
import MyDialog from "@/components/MyDialog.vue";
import type { Card } from "@/types/Card";
import suit_icon_dict from "@/assets/data/suit_icon_dict.json";
import { STATIC_URL } from "@/configs/yz";
import { deepClone } from "@/utils/conversion";
import CardDetail from "./CardDetail.vue";

const show = ref(false);
const hidden = ref(true);
const readOnly = ref(false);
const maxCount = ref(1);
const userId = ref(0);
const buckleCardsSelection: Card[] = reactive([]);
const delayedCardsSelection: Card[] = reactive([]);
const materielCardsSelection: Card[] = reactive([]);
const handCardsSelection: Card[] = reactive([]);
const selectedIds: number[] = reactive([]);
let currentResolve: null | Function = null;
const oCardDetail = useTemplateRef("oCardDetail");
const open = (props: { userId?: number; buckleCards?: Card[]; delayedCards?: Card[]; materielCards?: Card[]; handCards?: Card[]; maxCount?: number; selectedIds?: number[]; hidden?: boolean; readOnly?: boolean }): Promise<number[]> => {
	return new Promise((resolve) => {
		userId.value = props.userId || 0;
		show.value = true;
		hidden.value = props.hidden || false;
		readOnly.value = props.readOnly || false;
		maxCount.value = props.maxCount || 1;
		buckleCardsSelection.length = 0;
		buckleCardsSelection.push(...(props.buckleCards || []));
		delayedCardsSelection.length = 0;
		delayedCardsSelection.push(...(props.delayedCards || []));
		materielCardsSelection.length = 0;
		materielCardsSelection.push(...(props.materielCards || []));
		handCardsSelection.length = 0;
		handCardsSelection.push(...(props.handCards || []));
		selectedIds.length = 0;
		selectedIds.push(...(props.selectedIds || []));
		currentResolve = resolve;
	});
};
const select = (id: number) => {
	const index = selectedIds.indexOf(id);
	if (index == -1) {
		if (selectedIds.length < maxCount.value) selectedIds.push(id);
	} else selectedIds.splice(index, 1);
};
const cardMousedown = (card: Card) => {
	let timer = setTimeout(() => {
		oCardDetail.value?.open({ card });
	}, 500);
	document.body.addEventListener("mouseup", fn);
	function fn() {
		clearTimeout(timer);
		document.body.removeEventListener("mouseup", fn);
	}
};
const cardTouchStart = (card: Card) => {
	let timer = setTimeout(() => {
		oCardDetail.value?.open({ card });
	}, 200);
	document.body.addEventListener("touchend", fn);
	function fn() {
		clearTimeout(timer);
		document.body.removeEventListener("touchend", fn);
	}
};
defineExpose({ open });
</script>

<template>
	<MyDialog v-model:show="show">
		<div class="picker" @click.stop>
			<div class="content">
				<h1>扣至牌</h1>
				<div class="selection">
					<div
						v-for="v in buckleCardsSelection"
						:key="v.cardId"
						:class="{ card: true, 'hand-card': true, active: selectedIds.includes(v.cardId) }"
						@mousedown="cardMousedown(v)"
						@touchstart="cardTouchStart(v)"
						@click="select(v.cardId)"
					>
						<div :class="{ suit: true, red: v.suit == 'heart' || v.suit == 'diamond' }">
							<span>{{ suit_icon_dict[v.suit] }}</span>
							<span>{{ v.rank }}</span>
						</div>
						<img :src="STATIC_URL + v.src" alt="" />
					</div>
				</div>
				<h1>延时牌</h1>
				<div class="selection">
					<div
						v-for="v in delayedCardsSelection"
						:key="v.cardId"
						:class="{ card: true, 'hand-card': true, active: selectedIds.includes(v.cardId) }"
						@mousedown="cardMousedown(v)"
						@touchstart="cardTouchStart(v)"
						@click="select(v.cardId)"
					>
						<div :class="{ suit: true, red: v.suit == 'heart' || v.suit == 'diamond' }">
							<span>{{ suit_icon_dict[v.suit] }}</span>
							<span>{{ v.rank }}</span>
						</div>
						<img :src="STATIC_URL + v.src" alt="" />
					</div>
				</div>
				<h1>装备牌</h1>
				<div class="selection">
					<div
						v-for="v in materielCardsSelection"
						:key="v.cardId"
						:class="{ card: true, 'hand-card': true, active: selectedIds.includes(v.cardId) }"
						@mousedown="cardMousedown(v)"
						@touchstart="cardTouchStart(v)"
						@click="select(v.cardId)"
					>
						<div :class="{ suit: true, red: v.suit == 'heart' || v.suit == 'diamond' }">
							<span>{{ suit_icon_dict[v.suit] }}</span>
							<span>{{ v.rank }}</span>
						</div>
						<img :src="STATIC_URL + v.src" alt="" />
					</div>
				</div>
				<h1>手牌</h1>
				<div class="selection">
					<div
						v-for="v in handCardsSelection"
						:key="v.cardId"
						:class="{ card: true, 'hand-card': true, active: selectedIds.includes(v.cardId) }"
						@mousedown="!hidden && cardMousedown(v)"
						@touchstart="!hidden && cardMousedown(v)"
						@click="select(v.cardId)"
					>
						<template v-if="!hidden">
							<div :class="{ suit: true, red: v.suit == 'heart' || v.suit == 'diamond' }">
								<span>{{ suit_icon_dict[v.suit] }}</span>
								<span>{{ v.rank }}</span>
							</div>
							<img :src="STATIC_URL + v.src" alt="" />
						</template>
					</div>
				</div>
			</div>
			<button class="primary" @click="currentResolve?.(deepClone(selectedIds)), (show = false)">确定</button>
		</div>
		<CardDetail ref="oCardDetail" />
	</MyDialog>
</template>

<style lang="scss" scoped>
@use "../styles/picker.scss";
</style>
